<template>
	<view class="content">
		<view v-for="(item, index) in datas" :key="index" v-if="item.isshow">
			<!-- <view class="title_text">
				<rich-text :nodes="item.hr_name"></rich-text>
			</view>
			<view class="bottom">
				<view class="title_time">{{item.creat_time}}</view>
				<view class="item_btn" @click="deleteitem(index,item.hr_id)">移出资源车</view>
			</view> -->

			<!-- 试题 -->
			<view class="item1" v-if="item.hr_type==1">
				<view class="first-title-container">
					<view class="type_name">{{item.questions.question_type_name}}</view>
				</view>
				<view class="topic-item1">
					<rich-text class="richtext-size" :nodes="item.questions.question_title"></rich-text>
				</view>

				<view class="answer-item1" v-if="item.questions.isshow && item.questions.is_sub_question == 1">
					<view class="answer_text" v-if="item.questions.question_typeid == 1 || item.questions.question_typeid == 2" v-for="(aitem, aindex) in item.questions.answer_list"
					 :key="aindex">
						<text>{{ aitem.text }}、</text>
						<rich-text :nodes="aitem.answer"></rich-text>
					</view>
					<view class="zanswer"><text>正确答案：</text>
						<rich-text :nodes="item.questions.answer_text"></rich-text>
					</view>
					<view class="analysis_title">题目解析</view>
					<view class="analysis">
						<rich-text :nodes="item.questions.question_analysis"></rich-text>
					</view>
				</view>
				<view class="sub_question" v-if="item.questions.isshow && item.questions.is_sub_question == 2" v-for="(subitem,sindex) in item.questions.sub_questionList"
				 :key="sindex">
					<view class="sub_type">{{sindex+1}} 、 {{subitem.question_type_name}}</view>
					<view class="sub_title">
						<rich-text :nodes="subitem.question_title"></rich-text>
					</view>
					<view class="answer_text" v-if="subitem.question_typeid == 1 || subitem.question_typeid == 2" v-for="(aitem, aindex) in subitem.answer_list"
					 :key="aindex">
						<text>{{ aitem.text }}、</text>
						<rich-text :nodes="aitem.answer"></rich-text>
					</view>
					<view class="zanswer"><text>正确答案：</text>
						<rich-text :nodes="subitem.answer_text"></rich-text>
					</view>
					<view class="analysis_title">题目解析</view>
					<view class="analysis">
						<rich-text :nodes="subitem.question_analysis"></rich-text>
					</view>
				</view>
				<view class="bottom_look">
					<view class="iconfont iconjiantou lookicon" :class="{ active_look: item.questions.isshow }" @click="isshow(index)"></view>
				</view>
				<view class="work_item operation">
					<view style="background:#FF9900" class="addWork_btn" @tap="deleteitem(index, item.hr_id)">移除资源车</view>
				</view>
			</view>
			<!-- 试题 -->

			<!-- 试卷 -->
			<view class="work_content" v-if="item.hr_type == 2">
				<view class="work_item" style="position: relative;">
					<view class="item_name">{{ item.ename }}</view>
					<text class="timeWork_sub">{{ item.subject_name[0] }}</text>
				</view>
				<view class="work_item">
					<view class="teach-material-title">试卷总分：</view>
					<view class="grey-title">{{ item.total }}分</view>
				</view>
				<view class="work_item">
					<view class="teach-material-title">创建时间：</view>
					<view class="grey-title">{{ item.exam_creat_time }}</view>
				</view>
				<view class="work_item operation">
					<view class="look" @click="look(index)">查看</view>
					<view style="background:#FF9900" class="addWork_btn" @tap="deleteitem(index, item.hr_id)">移除资源车</view>
				</view>
			</view>
			<!-- 试卷 -->

			<!-- 资源 -->
			<view class="resources_list-item" v-if="item.hr_type == 3">
				<view class="item-name">
					<text class="iconfont iconwendangziyuan" v-if="item.files_type == 1"></text>
					<text class="iconfont iconshipinziyuan" v-if="item.files_type == 2"></text>
					<text class="iconfont iconyinpinziyuan" v-if="item.files_type == 3"></text>
					{{ item.hr_name }}
				</view>
				<view class="item-look">
					<view class="look-link" @click="look(index)">查看</view>
					<view class="addbtn" style="background:#FF9900" @tap="deleteitem(index, item.hr_id)">移出资源车</view>
				</view>
			</view>
			<!-- 资源 -->
			<view class="optimal" v-if="item.hr_type == 4">
				<view class="optimal_top">
					<view class="img">
						<image :src="item.opt_image_url"></image>
					</view>
					<view class="optimal_text">
						<view class="title">
							<rich-text :nodes="item.opt_title"></rich-text>
						</view>
						<view class="label">
							<rich-text :nodes="'备注:' + item.opt_remarks"></rich-text>
						</view>
						<view>
							<rich-text :nodes="'作者:' + item.opt_user_name"></rich-text>
						</view>
					</view>
				</view>
				<view class="work_item operation">
					<view class="look" @click="look(index)">查看</view>
					<view style="background:#FF9900" class="addWork_btn" @tap="deleteitem(index, item.hr_id)">移除资源车</view>
				</view>
			</view>
		</view>
		<view style="height: 120upx;"></view>
		<view class="btns">
			<view class="btn">已添加2</view>
			<view class="btn gotoBtn">前往发布</view>
		</view>
	</view>
</template>

<script>
	import Util from '../../common/util.js';
	export default {
		data() {
			return {
				datas: [],
				quesNum: 0
			};
		},
		onLoad() {
			this.getselectList();
			var _this = this;
			uni.$on('update', function() {
				_this.getselectList();
			});
		},
		onUnload() {
			uni.$off('update');
		},
		components: {},
		methods: {
			getselectList: function() {
				var _this = this;
				this.$zapi.apiPost('user/Grade.Resource/HrLists').then(res => {
					var data = res.data;
					if (data.code == 200) {
						this.datas = data.data;
						this.quesNum = this.datas.length;
						var question_id = [];
						this.datas.forEach((val, Key) => {
							val.creat_time = Util.getFormatTime(val.creat_time);
							if (val.exam_creat_time != null) {
								val.exam_creat_time = Util.getFormatTime(val.exam_creat_time);
							}
							if (val.hr_type == 1) {
								question_id.push(val.question_id);
							}
							val.isshow = true;
						});
						if (question_id.length > 0) {
							this.getList(question_id);
						}
					} else {
						this.quesNum = 0;
					}
				});
			},
			getList: function(question_id) {
				var data = {
					is_get_answer: 2,
					is_out_html: 2,
					question_id: question_id,
					pagesize: question_id.length
				};
				this.$zapi.apiPost('user/question.Lists/questionList', data).then(res => {
					if (res.data.code == 200) {
						let questionList = res.data.data.data;
						questionList.forEach((item, key) => {
							item.isshow = false;
						});
						var f_question_string = res.data.data.f_question_string;
						if (f_question_string != '') {
							this.$zapi.apiPost('user/question.Lists/questionSublist', {
								parent_question_id: f_question_string,
								is_get_answer: 2,
								is_out_html: 2
							}).then(res => {
								var sub_questionList = res.data.data;
								questionList.forEach((item, key) => {
									if (item.is_sub_question == 2) {
										sub_questionList.forEach((val, k) => {
											if (Number(item.question_id) == Number(val.f_question_id)) {
												util.latex_reques(val.question_sub_lists, 'question_title'); //解析 试题标题 latex 公式转换
												util.latex_reques(val.question_sub_lists, 'question_analysis'); //解析 试题解析 latex 公式转换
												util.latex_answer(val.question_sub_lists, 'answer_list');
												util.setquestion(val.question_sub_lists);
												item.sub_questionList = val.question_sub_lists;
											}
										});
									}
								});
							});
						}
						util.latex_reques(questionList, 'question_title'); //解析 试题标题 latex 公式转换
						util.latex_reques(questionList, 'question_analysis'); //解析 试题解析 latex 公式转换
						util.latex_answer(questionList, 'answer_list');
						util.setquestion(questionList);

						this.datas.forEach((item, key) => {
							questionList.forEach((val, k) => {
								if (item.question_id == val.question_id) {
									item.questions = val;
								}
							})
						})
						this.$forceUpdate()
						console.log(this.datas, "===");
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
					}
				});
			},
			isshow: function(index) {
				this.datas[index].questions.isshow = !this.datas[index].questions.isshow;
				this.$forceUpdate();
			},
			look: function(index) {
				var type = this.datas[index].hr_type;
				switch (type) {
					case 2:
						uni.navigateTo({
							url: './exam_datailed?eid=' + this.datas[index].eid
						})
						break;
					case 3:
						uni.navigateTo({
							url: './resources_Detail?tid=' + this.datas[index].tid + '&name=' + this.datas[index].hr_name + '&type=' +
								this.datas[index].files_type + '&num=4.5'
						})
						break;
					case 4:
						uni.navigateTo({
							url: './good-course-detail?url=' + encodeURIComponent(JSON.stringify(this.datas[index].opt_url))
						})
						break;
				}
			},
			deleteitem(index, hr_id) {
				this.datas[index].isshow = false;
				// 移除 题目
				this.$zapi
					.apiPost('user/Grade.Resource/delHr', {
						hr_id: hr_id
					})
					.then(res => {
						if (res.data.code == 200) {
							this.quesNum--;
							uni.showToast({
								title: '移除成功',
								icon: 'none'
							});
						}
					});
				this.$forceUpdate();
			}
		}
	};
</script>

<style lang="scss">
	.content {
		position: relative;
		background: #efefef;
		padding-top: 20upx;
		width: 100%;
		height: 100%;
		min-height: 1180upx;
	}

	.item {
		width: 94%;
		margin: auto;
		background: #ffffff;
		border-radius: 30upx;
		display: flex;
		margin-bottom: 20upx;
		flex-direction: column;

		.title_text {
			width: 95%;
			line-height: 80upx;
			font-size: 32upx;
			margin: auto;
			color: #999999;
		}

		.bottom {
			width: 95%;
			margin: auto;
			height: 80upx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item_btn {
				height: 50upx;
				display: flex;
				align-items: center;
				background-color: #ff9900;
				border-radius: 8upx;
				color: #ffffff;
				padding: 0upx 10upx;
			}

			.title_time {
				color: #999999;
			}
		}
	}

	/* 试卷 */
	.work_content {
		width: 92%;
		margin: auto;
		background: rgba(255, 255, 255, 1);
		border-radius: 16upx;
		margin-bottom: 20upx;
	}

	.work_item view {
		display: inline-block;
	}

	.work_item {
		height: 70upx;
		font-size: 34upx;
		line-height: 70upx;
		color: rgba(102, 102, 102, 1);
		margin: 0upx 30upx 0 30upx;
		/* border-top: 1px solid #E5E5E5; */
	}

	.work_item:first-child {
		border-top: 0px solid #e5e5e5;
		height: 90upx;
		font-size: 17px;
		text-align: center;
		line-height: 90upx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.work_item:last-child {
		height: 110upx;
		font-size: 17px;
		text-align: right;
		line-height: 110upx;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
	}

	.timeWork_sub {
		display: inline-block;
		position: absolute;
		top: 28upx;
		width: 36upx;
		height: 36upx;
		background-color: #00acfe;
		line-height: 36upx;
		font-size: 24upx;
		color: white;
		text-align: center;
		margin-left: 20upx;
		border-radius: 8upx;
	}

	.operation>view {
		padding: 14upx 28upx;
		margin-left: 30upx;
		color: white;
		line-height: 32upx;
	}

	.operation>.del_btn {
		background-color: #ff7171;
	}

	.operation>.look {
		border-radius: 30upx;
		background: rgba(0, 213, 162, 1);
	}

	.operation>.addWork_btn {
		background-color: #00acfe;
		border-radius: 30upx;
	}

	/* 试卷 */
	/* 试题 */
	.item1 {
		width: 92%;
		margin: auto;
		background: #ffffff;
		margin-bottom: 20upx;
		border-radius: 20upx;
	}

	.first-title-container {
		height: 100upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.type_name {
		font-size: 34upx;
		margin-left: 25upx;
		padding-left: 10upx;
		border-left: 5upx solid #00acfe;
		color: #999999;
		line-height: 1;
	}

	.first-title {
		font-size: 32upx;
		color: #333333;
	}

	.election {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 160upx;
		background: #ff9900;
		color: #ffffff;
		border-radius: 30upx;
		margin-right: 20upx;
		font-size: 28upx;
	}

	.active_election {
		background: #00adff;
	}

	.topic-item1 {
		margin-left: 20upx;
		font-size: 34upx;
		color: #333333;
		margin-top: 15upx;
		margin-right: 20upx;
	}

	.answer-item1 {
		margin-left: 20upx;
		margin-right: 20upx;
		font-size: 24upx;
		color: #666666;
		margin-top: 5upx;
		margin-bottom: 15upx;
	}

	.answer_text {
		font-size: 32upx;
		color: #666666;
		display: flex;
		justify-content: flex-start;
		margin-bottom: 10upx;
	}

	.zanswer {
		margin-top: 20upx;
		font-size: 32upx;
		color: #FF9900;
		display: flex;
		word-break: break-word;
	}

	.zanswer text {
		white-space: nowrap;
	}

	.analysis_title {
		font-size: 34upx;
		font-weight: 500;
		color: #333333;
		margin-top: 20upx;
		margin-bottom: 14upx;
	}

	.analysis {
		font-size: 32upx;
		color: #666666;
	}

	.richtext-size {
		font-size: 32upx;
	}

	.sub_question {
		width: 92%;
		margin-left: 5%;

		.sub_type {
			margin: 20upx 0upx;
			line-height: 1;
			font-size: 30upx;
			color: #999999;
		}

		.sub_title {
			font-size: 30upx;
			color: #333333;
		}

		.answer_text {
			font-size: 30upx;
			color: #666666;
			line-height: 60upx;
		}

		.zanswer {
			font-size: 30upx;
		}

		.analysis_title {
			font-size: 32upx;
			font-weight: 500;
			color: #333333;
			margin-top: 20upx;
			margin-bottom: 14upx;
		}

		.analysis {
			font-size: 30upx;
			color: #666666;
		}
	}

	.bottom_look {
		display: flex;
		justify-content: flex-end;
	}

	.lookicon {
		width: 45upx;
		margin-right: 30upx;
		font-size: 50rpx;
		line-height: 50rpx;
	}

	.active_look {
		transform: rotate(90deg);
	}

	/* 试题 */
	/* 资源 */

	.resources_list-item {
		width: 92%;
		margin: auto;
		margin-bottom: 20rpx;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		background: #ffffff;
		border-radius: 16upx;

		// 资源名称
		.item-name {
			font-size: 30upx;
			text-overflow: ellipsis;
			overflow: hidden;
			white-space: nowrap;
			margin-left: 20rpx;
			line-height: 80rpx;
		}

		// 查看
		.item-look {
			height: 95rpx;
			display: flex;
			margin-left: auto;
			margin-right: 4%;
			justify-content: space-between;
			align-items: center;

			.look-link {
				font-size: 26upx;
				text-align: center;
				padding: 14upx 28upx;
				margin-left: 30upx;
				color: white;
				line-height: 32upx;
				border-radius: 30upx;
				background: rgba(0, 213, 162, 1);

				text {
					display: inline-block;
					width: 46px;
					height: 25px;
					margin-left: 20upx;
					border-radius: 23px;
				}

				.look {
					border: 1px solid rgba(0, 172, 254, 1);
				}

				.look-tag {
					color: #666666;
				}
			}

			.addbtn {
				font-weight: bold;
				background-color: #00acfe;
				border-radius: 30upx;
				color: #ffffff !important;
				padding: 14upx 28upx;
				margin-left: 30upx;
				line-height: 32upx;
			}
		}
	}

	.iconwendangziyuan,
	.iconshipinziyuan,
	.iconyinpinziyuan {
		margin-right: 20upx;
		color: #00acfe;
	}

	/* 资源 */
	/* 优课 */
	.optimal {
		width: 92%;
		margin: auto;
		background: rgba(255, 255, 255, 1);
		border-radius: 16upx;
		margin-bottom: 20upx;

		.optimal_top {
			display: flex;
			flex-direction: row;
			width: 94%;
			margin: auto;
			padding-top: 20upx;

			.img {
				width: 200upx;
				height: 200upx;
				margin-right: 30upx;

				image {
					max-width: 100%;
					max-height: 100%;
				}
			}

			.optimal_text {
				view {
					color: #999999;
					line-height: 65upx;
					font-size: 30upx;
				}

				.title {
					color: #333333;
					font-size: 32upx;
					font-weight: 500;
				}

				.label {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
	}

	.btns {
		display: flex;
		justify-content: space-between;
		width: 92%;
		margin: auto;
	}

	.btns .btn {
		width: 300upx;
		height: 80upx;
		color: #FFFFFF;
		text-align: center;
		line-height: 80upx;
		font-size: 32upx;
		background: linear-gradient(180deg, rgba(255, 156, 106, 1) 0%, rgba(234, 84, 85, 1) 100%);
		border-radius: 8upx;
	}

	.btns .gotoBtn {
		background: linear-gradient(180deg, rgba(255, 170, 0, 1) 0%, rgba(255, 153, 0, 1) 100%);
	}
</style>
